<template>
	<div class="wrapper">
		<LjdCarousel />
		<div class="news">
			<div class="left">
				<ECharts v-if="mapLoaded" :options="chartOptions_map" />
			</div>
			<div class="right">
				<ECharts :options="chartOptions_bar" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import LjdCarousel from '@/components/Carousel';
	import {
		ref,
		onMounted,
		reactive,
		watch
	} from 'vue';
	import ECharts from '@/echarts/echarts.vue';
	import * as echarts from 'echarts';
	import {
		get
	} from '@/axios';

	const map_data = ref([]);
	const map_map = ref('');
	const map_title = ref('');
	const map_legend = ref('');
	const map_datamax = ref();

	const mapLoaded = ref(false);

	const bar_title = ref('');
	const bar_legend = ref([]);
	const bar_categories = ref([]);
	const bar_data = ref([]);

	const bardatagetted = ref(false);


	const chartOptions_bar = reactive({
		title: {
			text: bar_title.value,
			left: 'center',
		},
		tooltip: {},
		legend: {
			data: bar_legend.value,
		},
		dataZoom: [{
				type: 'slider',
				show: true,
				start: 0,
				end: 20,
				handleSize: 20,
			},
			{
				type: 'inside',
				start: 0,
				end: 2,
			},
		],
		xAxis: {
			type:'category',
			data: bar_categories.value,
			axisTickObject:{
				alignWithLabel:true,
				interval:0
			}
		},
		yAxis: {},
		series: [{
			name: bar_legend.value,
			type: 'bar',
			data: bar_data.value,
		}, ],
	});

	const chartOptions_map = reactive({
		title: {
			text: map_title.value,
			left: 'left',
		},
		toolbox: {
			show: true,
			left: 'right',
			top: 'top',
			feature: {
				dataView: {
					readOnly: true,
				},
				restore: {},
				saveAsImage: {},
			},
		},
		tooltip: {
			trigger: 'item',
			formatter: function(params) {
				const seriesName = params.seriesName;
				const name = params.name;
				if (params.data) {
					const value = params.value;
					return `${seriesName}<br/>${name}：${value}`;
				} else {
					return `${seriesName}<br/>${name}：无数据`;
				}
			},
		},
		legend: {
			show: false,
		},
		visualMap: {
			left: 'right',
			min: 0,
			max: map_datamax.value,
			text: ['高', '低'],
			calculable: true,
			inRange: {
				color: ['green', 'yellow', 'red'],
				symbolSize: [100, 100],
			},
		},
		series: [{
			name: map_legend.value,
			type: 'map',
			map: 'map',
			roam: true,
			nameProperty: 'name',
			data: map_data.value,
			itemStyle: {
				normal: {
					color: 'rgba(0, 0, 0, 0)',
				},
				emphasis: {
					color: 'rgba(0, 0, 0, 0)',
				},
			},
		}, ],
	});

	const loadMapData = async () => {
		try {
			const module = await import(`@/maps/${map_map.value}.json`);
			const Map = module.default;
			echarts.registerMap('map', Map);
			mapLoaded.value = true; // Set mapLoaded to true when map is registered
		} catch (error) {
			console.error('Failed to load map data:', error);
		}
	};

	watch(mapLoaded, (newValue) => {
		if (newValue) {
			chartOptions_map.series[0].data = map_data.value;
			chartOptions_map.title.text = map_title.value;
			chartOptions_map.visualMap.max = map_datamax.value;
			chartOptions_map.series[0].name = map_legend.value;
		}
	});

	watch(bardatagetted, (newValue) => {
		if (newValue) {
			chartOptions_bar.series[0].data = bar_data.value;
			chartOptions_bar.title.text = bar_title.value;
			chartOptions_bar.xAxis.data = bar_categories.value;
			chartOptions_bar.series[0].name = bar_legend.value;
			chartOptions_bar.legend.data = bar_legend.value;
		}
	});

	onMounted(() => {
		get('/data/count', {rId: '0'}, (content) => {
			map_data.value = content.data;
			map_map.value = content.map;
			map_title.value = content.title;
			map_legend.value = content.legend;
			map_datamax.value = content.datamax;

			loadMapData();
		});
		get('/data/avgincome', {rId: '0'}, (content) => {
			bar_data.value = content.data;
			bar_title.value = content.title;
			bar_legend.value = content.legend;
			bar_categories.value = content.categories;
			bardatagetted.value = true;
		})
	});
</script>

<style scoped lang="scss">
	$MyBorder: 1px solid #cccccc;

	.wrapper {
		display: flex;
		flex-direction: column;

		.news {
			margin-top: 10px;
			flex: 1;
			display: flex;

			.left,
			.right {
				flex: 1;
				border: $MyBorder;
				border-radius: 10px;
				display: flex;
				justify-content: center;
				/* 水平居中 */
				margin-bottom: 90px;
			}
		}
	}
</style>